<template>
    <div class="datepicker-wrap">
        <!--重写input输入框，监听数据-->
        <template v-if="rewriteInput">
            <input v-if="['time','date','datetime','month'].includes($attrs.type)" class="date-ipt" type="text" placeholder="请选择" @click="handleOpen" @change="iptChange" @focus="handleOpen" v-model="iptValue" :readonly="$attrs.readonly" :disabled="$attrs.disabled">

            <template v-if="['daterange','datetimerange'].includes($attrs.type)">
                <div style="height: 100%;" class="range-wrap">
                    <input class="date-ipt" data-index="0" type="text" placeholder="请选择" @click="handleOpen" @change="iptChange" @focus="handleOpen" v-model="iptValue[0]" :readonly="$attrs.readonly" :disabled="$attrs.disabled">
                    <span style="margin: 0 10px;">至</span>
                    <input class="date-ipt" data-index="1" type="text" placeholder="请选择" @click="handleOpen" @change="iptChange" @focus="handleOpen" v-model="iptValue[1]" :readonly="$attrs.readonly" :disabled="$attrs.disabled">

                </div></template>
            <!--<input class="date-ipt" type="text" placeholder="请选择" @click="handleOpen" @change="" @focus="handleOpen" v-model="tempValue" :readonly="$attrs.readonly" :disabled="$attrs.disabled">-->
        </template>

        <template v-else>
            <el-input v-if="['time','date','datetime','month'].includes($attrs.type)" class="date-ipt" placeholder="请选择" @click="handleOpen" @focus="handleOpen" @change="iptChange" v-model="iptValue" :readonly="$attrs.readonly" :disabled="$attrs.disabled"></el-input>
            <template v-if="['daterange','datetimerange'].includes($attrs.type)">
                <div style="height: 100%;" class="range-wrap">
                    <el-input class="date-ipt" type="text" placeholder="请选择" @click="handleOpen" @change="iptChange" @focus="handleOpen" v-model="iptValue[0]" :readonly="$attrs.readonly" :disabled="$attrs.disabled"></el-input>
                    <span style="margin: 0 10px;">至</span>
                    <el-input class="date-ipt" type="text" placeholder="请选择" @click="handleOpen" @change="iptChange" @focus="handleOpen" v-model="iptValue[1]" :readonly="$attrs.readonly" :disabled="$attrs.disabled"></el-input>

                </div>
            </template>
        </template>

        <el-config-provider  :locale="locale" v-if="isLoaded">
            <!--设置高度0隐藏原来el-input输入框-->
            <el-date-picker
                    v-if="!timePicker"

                    :type="$attrs.type"
                    :placeholder="$attrs.placeholder"
                    v-model="tempValue"
                    style="height: 0;overflow:hidden;width: 100%;"
                    ref="picker"
                    @change="handleChange"
                    @visible-change="(d) => {!d && (isLoaded = false);}"
                    :value-format="$attrs['value-format'] || 'YYYY-MM-DD HH:mm:ss'"
            />
            <el-time-picker
                    v-if="timePicker"
                    :type="$attrs.type"
                    :placeholder="$attrs.placeholder"
                    v-model="tempValue"
                    ref="picker"
                    style="height: 0;overflow:hidden;width: 100%;"
                    @change="handleChange"
                    :format="$attrs['format'] || 'HH:mm'"
                    :value-format="$attrs['value-format'] || 'HH:mm'"
            />
        </el-config-provider>
    </div>
</template>

<script setup>

    //element-plus日期组件默认英文改为中文
    import zhCn from 'element-plus/lib/locale/lang/zh-cn'
    import {ref,defineEmits ,defineProps,watch,useSlots,nextTick,useAttrs } from 'vue'

    let slots = useSlots(),
      attrs = useAttrs();
    let locale = ref(zhCn)

    const props = defineProps(['value','rewriteInput','timePicker']);
    const emit = defineEmits(['change']);
    let picker = ref(null),
      tempValue = ref(''),
      iptValue = ref(''),
      isLoaded = ref(false);

    /*watch(() => attrs.type,(val) =>{
      if (val.indexOf('range') >= 0){
        tempValue.value = [];
      }
    },{immediate: true})*/

    watch(() => props.value,(newVal) => {
      newVal !== undefined && (tempValue.value = newVal);
      if (attrs.type.indexOf('range') >= 0 && !newVal){
        iptValue.value = [];
      }else {
        iptValue.value = newVal;
      }

      // tempValue.value = newVal
    },{immediate: true})


    function handleOpen(e) {
      if (attrs.readonly || attrs.disabled)return;
      // if (!isLoaded.value) isLoaded.value = true;
      isLoaded.value = true;
      nextTick(() => picker.value.handleOpen());

    }
    function handleChange(val) {
      // console.log('handleChange',val);
      if (attrs.type.indexOf('range') >= 0 && !val){
        iptValue.value = [];
      }else {
        iptValue.value = val;
      }
      // console.log(iptValue.value);
      picker.value && picker.value.handleClose();
      emit('change',iptValue.value)
      isLoaded.value = false;
    }


    function iptChange(e) {
      // console.log('iptChange',e);
      tempValue.value = iptValue.value
      emit('change',iptValue.value)
    }
    /*function elIptChange(val,item) {
      tempValue.value = iptValue.value;
      emit('change',iptValue.value)
    }*/

</script>

<style scoped lang="less">
    .datepicker-wrap{
        display: flex;
        flex-direction: column;
        height: 100%;
        .range-wrap{
            width: 100%;
            display: flex;
            align-items: center;
            .date-ipt{
                flex: 1;
                width: 0;
            }
        }
        .date-ipt{
            height: 100%;
        }
    }
</style>
